<template>
    <div class="cnode-list-page" @scroll="wrapScroll($event)">
        <List :list="currentList"></List>
    </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from 'vuex';
import List from '@/components/List';
  
export default {
    name: 'index',
    components: {
        List
    },
    metaInfo: {
        title: '首页',
        titleTemplate: '%s - Cnode',
        meta: [
            {name: 'keywords', content: 'cnode PWA'},
            {name: 'description', content: '基于 Lavas 的 cnode 社区'}
        ]
    },
    data() {
        return {
            minDist: 100
        }
    },
    computed: {
        ...mapState('list', ['list']),
        ...mapState('appShell/common', ['currentTab']),
        currentList() {
            return this.list[`${this.currentTab}`]
        }
    },
    async asyncData({store, route}) {
        const tab = route.query.tab || 'all'

        store.dispatch('list/getList', tab);
    },
    activated() {

    },
    mounted() {
    },
    methods: {
        ...mapActions('list', ['getList', 'getMore']),
        wrapScroll(event) {
            const target = event.target;

            if (target.scrollTop + target.clientHeight + this.minDist >= target.scrollHeight) {
                this.getMore()
            } 
        },
    }
};
</script>

<style lang="stylus" scoped>
.cnode-list-wrap
    display flex
    justify-content flex-start
    flex-direction column
</style>
